<template>
	<view
		:style="[$u.addStyle(customStyle)]"
		:class="[customClass]"
		class="v-cell-group"
	>
		<view v-if="title" class="v-cell-group__title">
			<slot name="title">
				<text class="v-cell-group__title__text">{{ title }}</text>
			</slot>
		</view>
		<view class="v-cell-group__wrapper">
			<v-line v-if="border"></v-line>
			<slot />
		</view>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
/**
 * cellGroup  单元格
 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
 *
 * @property {String}	title		分组标题
 * @property {Boolean}	border		是否显示外边框 (默认 true )
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function} click 	点击cell列表时触发
 * @example <v-cell-group title="设置喜好">
 */
export default {
	name: "v-cell-group",
	mixins: [mpMixin, mixin, props],
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

$v-cell-group-title-padding: 16px 16px 8px !default;
$v-cell-group-title-font-size: 15px !default;
$v-cell-group-title-line-height: 16px !default;
$v-cell-group-title-color: $v-main-color !default;

.v-cell-group {
	flex: 1;

	&__title {
		padding: $v-cell-group-title-padding;

		&__text {
			font-size: $v-cell-group-title-font-size;
			line-height: $v-cell-group-title-line-height;
			color: $v-cell-group-title-color;
		}
	}

	&__wrapper {
		position: relative;
	}
}
</style>
